<template>
    <div  >
        <canvas :key="canvasKey" :id="canvasId" width="472px" height="380px"></canvas>
        <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="linkClick()">链接8</a-button>
    </div>
  </template>
  
  <script>
  import {qrcanvas} from 'qrcanvas'
  export default {
    data() {
      return {
        newImage:new Image(),
        queryResultsQr:null,
        queryResultsImgUrl:'',
        canvasKey:null,
        canvasId:'signedVersion'+ new Date().getTime(),
      };
    },
    mounted() {
      
      this.getData()
    },
    methods: {
        getData(){
            this.queryResultsQr = qrcanvas({
                data: bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+`onSiteInspectionCheckInSignedVersion`|| "二维码生成中",
                size:260,
                background:'#fff'
            })
            this.queryResultsImgUrl = this.newImage.src = this.queryResultsQr.toDataURL("image/png")
            this.canvasKey = Date.now()
            this.$nextTick(()=>{
                var canvas = document.getElementById(this.canvasId);
                var context = canvas.getContext('2d');
                context.font = "22px Arial"
                context.textAlign = "center"
                // context.globalCompositeOperation = 'source-in';
                context.fillStyle = "#000";
                context.background = '#fff'
                context.fillText('签字',236,50);
                var img = new Image();
                img.onload = function() {
                    context.drawImage(img, 106, 80,260,260);
                }
                img.src = this.queryResultsQr.toDataURL("image/png");
            })
        },
        linkClick(){
            var link = document.createElement('a');
            link.target='_blank'
            link.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+`onSiteInspectionCheckInSignedVersion`; // 设置图片链接
            link.click(); // 模拟点击链接，下载图片

        },
    },
  };
  </script>
  
  <style>
  
  </style>